<template>
  <div class="article-card-wrapper" @click="gotoArticle">
    <img :src="$baseURL + article.cover" alt="cover" class="cover"
    v-if="article.cover">
    
    <div class="article-content">
      <div class="pub-info" >
        <em class="pointableBlue" @click.stop="gotoAuthor">
          {{article.author_name}}
        </em> <span style="color: var(--gray)">|</span> 
        {{formatDate}}
      </div>
      <h3 class="article-title">
        {{article.title}}
      </h3>
      <h3 class="article-abstract">
        {{article.digest}}
      </h3>
    </div>

    <button class="delete-draft-button" @click.stop="deleteDraft">
      删除
    </button>
  </div>
</template>

<script>
export default {
  props: {
    article: Object
  },
  data() {
    return {
    }
  },
  computed: {
    formatDate() {
      return this.$dateUtils.format(this.article.publish_date, 'yyyy-MM-dd');
    }
  },
  methods: {
    gotoArticle() {
      this.$open(`/publish/article?draftId=${this.article.id}`);
    },
    gotoAuthor() {
      this.$open(`/author/${this.article.author_id}/profile/article`);
    },
    deleteDraft() {
      this.$confirm("确定删除这个草稿吗?").then(flag => {
        if(flag) {
          this.$post({
            name: 'delete draft',
            url: 'article/content/draft/delete',
            data: {
              draft_id: this.article.id
            }
          }).then(res => {
            if(res.data.success) {
              this.$alert("删除成功")
            } else {
              this.$alert({
                type: 'error',
                content: '删除失败'
              });
            }
          }).catch(error => {
            this.$alert({
              type: 'error',
              content: '删除失败'
            })
          })
        }
      })
    }
  },
}
</script>

<style scoped lang="less">
@w: var(--articleCardWidth);
@h: var(--articleCardHeight);

.article-card-wrapper {
  position: relative;
  box-sizing: border-box;
  width: @w;
  height: @h;
  height: @h;
  padding: calc(@h * 0.1) calc(@w * 0.04);
  text-align: left;

  &:hover {
    background-color: rgb(249, 249, 249);
    cursor: pointer;
  }

  .article-content {
    float: left;
    width: calc(@w * 0.65);
  }

  .pub-info {
    font-size: calc(@h * 0.06);
    line-height: 2;
  }

  .article-title {
    font-size: calc(@h * 0.14);
    font-weight: bold;
    color: var(--dark);
    line-height: 1.5;
    margin-bottom: calc(@h * 0.05);
    pointer-events: none;
  }

  .article-abstract {
    font-size: calc(@h * 0.09);
    color: var(--darkGray);
    line-height: 1.5;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    pointer-events: none;
  }

  .datas {
    margin-top: calc(@h * 0.04);

    display: flex;
    justify-content: left;
    align-items: center;

    li{
      i, span {
        font-size: calc(@h * 0.02);
      }

      span {
        margin-left: calc(@h * 0.04);
      }

      &:not(:first-child) {
        margin-left: calc(@w * 0.05);
      }
    }
  }

  .cover {
    float: left;
    height: calc(@h * 0.8);
    width: calc(@w * 0.22);
    margin-right: calc(@w * 0.03);
    opacity: .8;
  }

  .delete-draft-button {
    position: absolute;
    top: 8%;
    right: 3%;
    font-size:  14px;
    padding: 5px 8px;
    transition: .3s;
    border: 1px solid var(--gray);
    border-radius: 3px;

    &:hover {
      border-color: var(--lightBlue);
      color: var(--darkBlue);
    }
  }
}
</style>
